<template>
  <div>
    <div class="content">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名" class="form-header">
          <el-select
            v-model="formInline.userId"
            placeholder="请选择"
            class="slect"
            :disabled="isEdit"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创意名称" class="form-header">
          <el-input
            v-model="formInline.originality"
            placeholder="创意名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" class="form-header">
          <el-select
            v-model="formInline.status"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in [
                '有效',
                '暂停推广',
                '审核不通过',
                '待激活',
                '审核中',
                '未审核',
                '部分无效',
                '有效-移动URL审核中',
                '有效-部分文案审核不通过',
                '有效-小程序URL审核中',
              ]"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="素材" class="form-header">
          <el-input
            v-model="formInline.sourceMaterial"
            placeholder="素材"
          ></el-input>
        </el-form-item>
        <el-form-item label="计算机最终访问网址" class="form-header">
          <el-input
            v-model="formInline.visitWebsite"
            placeholder="计算机最终访问网址"
          ></el-input>
        </el-form-item>
        <el-form-item label="计算机访问网址监控后缀" class="form-header">
          <el-input
            v-model="formInline.websiteMonitoring"
            placeholder="计算机访问网址监控后缀"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目模式" class="form-header">
          <el-input
            v-model="formInline.projectMode"
            placeholder="项目模式"
          ></el-input>
        </el-form-item>
        <el-form-item label="日期" class="form-header">
          <el-date-picker
            v-model="formInline.createTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="消费" class="form-header">
          <el-input
            v-model="formInline.consumption"
            placeholder="消费"
          ></el-input>
        </el-form-item>
        <el-form-item label="展现" class="form-header">
          <el-input v-model="formInline.toShow" placeholder="展现"></el-input>
        </el-form-item>
        <el-form-item label="点击" class="form-header">
          <el-input v-model="formInline.click" placeholder="点击"></el-input>
        </el-form-item>
         <el-form-item label="投放设备" class="form-header">
          <el-select
            v-model="formInline.promotionType"
            placeholder="请选择"
            class="slect"
          >
            <el-option
              v-for="item in ['移动','计算机']"
              :key="item"
              :label="iteml"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广类型" class="form-header">
          <el-select
            v-model="formInline.promotionType"
            placeholder="请选择推广类型"
            class="slect"
          >
            <el-option
              v-for="item in [
                { value: '1', label: '推广业务' },
                { value: '2', label: '营销目标' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="queding">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button type="primary" plain @click="$emit('handleCancle')"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
import { listAllUser } from "@/api/caiwu/zhgl";
import { add, edit } from "@/api/sstg/cy";
import { mapState } from "vuex";
export default {
  name: "zhanghugai",
  data() {
    return {
      formInline: {
        userId: "",
        originality: "",
        promotionPlan: "",
        promotionUnit: "",
        sourceMaterial: "",
        status: "",
        visitWebsite: "",
        websiteMonitoring: "",
        finalVisit: "",
        mobileMonitoring: "",
        projectMode: "",
        consumption: "",
        toShow: "",
        click: "",
        userId: "",
        promotionType: "",
        createTime: "",
      },
      userList: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  props: {
    // 编辑数据
    objData: {
      type: Object,
      default: () => {},
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // 根据用户角色判断当前用户是否管理员角色，是则可下拉选择全量用户，否则是普通用户，使用当前用户id
    if ("admin".includes(this.user.roles)) {
      this.getList();
      this.formInline.userId = this.user.id;
    }
    // 是否是编辑
    if (this.isEdit) {
      this.formInline = this.objData;
    } else {
      this.resetForm();
    }
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      listAllUser({}).then((res) => {
        res.data.forEach((item) => {
          this.userList.push({
            userName: item.userName,
            userId: item.userId,
          });
        });
      });
    },
    // 新增、编辑提交
    handleSubmit() {
      let apiUrl = this.isEdit ? edit : add;
      // let params = this.isEdit
      //   ? {
      //       ...this.formInline,
      //       trendsId: this.objData.trendsId,
      //     }
      //   : this.formInline;
      apiUrl(this.formInline).then((res) => {
        if (res.code === 200) {
          this.$emit("handleCancle");
        }
      });
    },
    // 重置表单
    resetForm() {
      this.formInline = {
        userId: this.user.id,
        originality: "",
        promotionPlan: "",
        promotionUnit: "",
        sourceMaterial: "",
        status: "",
        visitWebsite: "",
        websiteMonitoring: "",
        finalVisit: "",
        mobileMonitoring: "",
        projectMode: "",
        consumption: "",
        toShow: "",
        click: "",
        userId: "",
        promotionType: "",
        createTime: "",
      };
    },
  },
};
</script>
<style scoped>
.queding {
  padding-bottom: 28px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 34%;
  margin: 0 auto;
}
.form-header {
  width: 492px;
  border: none;
}
.slect {
  width: 204px;
}
.content {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
